<template>
  <div class="login-container" >
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form ref="formRef" :model="dataForm" label-width="0px" class="login-form" @keyup.enter.native="submitForm(formRef)" v-loading="loading">
          <h1>欢迎登录</h1>
          <el-form-item
            prop="username"
            :rules="[
              {
                required: true,
                message: '请输入用户名',
                trigger: 'blur'
              }
            ]"
          >
            <el-input prefix-icon="User" v-model="dataForm.username" />
          </el-form-item>
          <el-form-item
            prop="password"
            :rules="{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            }"
          >
            <el-input
              type="password"
              show-password
              prefix-icon="Lock"
              v-model="dataForm.password"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading='loading' @click="submitForm(formRef)" style="width: 100%"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
// import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {usePermissionStore} from '@/stores/modules/permission'
import { useRouter } from 'vue-router'
import {getTime} from '@/utils/time'
let loading = ref(false)
let $router = useRouter()
let permissionStore = usePermissionStore()
const formRef = ref<FormInstance>()
const dataForm = reactive({
  username: '',
  password: ''
})
// const validatorPassword = (rule:any,value:any,callback:any)=>{
//   callback()
//   callback(new Error('错了'))
// }
 
// const rules = reactive<FormRules>({
//   username:[
//     {
//       required:true,
//       message:"",
//       trigger:'blur'
//     }
//   ],
//   password:[
//   {
//       validator:validatorPassword,
//       trigger:'blur'
//     }
//   ]
// })
onMounted(() => {})

// const { proxy } = getCurrentInstance()

function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true
        // dataForm
        await permissionStore.handleLogin()
        loading.value = false
        $router.push('/')
        // ElNotification({
        //   duration:1000,
        //   title: 'Success',
        //   message: '登录成功',
        //   type: 'success',
        // })
        ElMessage({
          message: `登录成功,${getTime()}好`,
          type: 'success'
        })
      } catch (error) {
        loading.value = false
        ElNotification({
          title: 'Error',
          message: (error as Error).message,
          type: 'error'
        })
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>
<style lang="scss">
.login-container {
  width: 100%;
  height: 100vh;
  // background: url('@/assets/images/background.png') no-repeat;
  background-size: cover;
  .login-form {
    width: 800px;
    position: relative;
    top: 30vh;
    padding: 50px 50px 50px 30px;
    background: rgba($color: #fff, $alpha: 0.4);
    h1 {
      margin-bottom: 20px;
      text-align: center;
    }
  }
}
</style>
